<template lang="html">
  <div id="">
    <!-- <span class="shadow"></span> -->
    <div class="mintPicker">
      <div class="pickerTop">
        <span class="cancel" @click="cancel">取消</span>
        请选择
        <span class="sure" @click="sure">确定</span>
      </div>
      <mt-picker
        :slots="slots"
        :value-key="valueKey"
        @change="onValuesChange">
      </mt-picker>
    </div>
  </div>
</template>

<script>
export default {
  name:'mintPicker',
  props:['slots','valueKey'],
  data:() => ({
    mintChooseValue:'',       //picker选择的值
  }),
  mounted() {
    //do something after mounting vue instance
    this.mintChooseValue = this.slots[0];


  },
  updated() {
    //do something after updating vue instance
    this.$nextTick( () => {
      this.mintChooseValue = this.slots[0].values[0];
    })
  },
  methods:{
    onValuesChange(picker, values) {
      if (values[0] > values[1]) {
        picker.setSlotValue(1, values[0]);
      }
      console.log(picker.getSlotValue(0));
      this.mintChooseValue = picker.getSlotValue(0);
    },
    cancel(){
      this.$emit('mintPickerBtn',{
        mintChooseValue:this.mintChooseValue,
        chooseBtn:false,
      });
    },
    sure(){
      console.log(this.mintChooseValue);
      this.$emit('mintPickerBtn',{
        mintChooseValue:this.mintChooseValue,
        chooseBtn:true,
      });
    }
  },
  created(){
    console.log(this.slots);
  }
}
</script>

<style lang="scss" scoped>
@import "@/main.scss";
.shadow{
  position: fixed;
  top: 0; bottom: 0;
  left: 0; right: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.5);
}
.mintPicker{
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  z-index: 3;
  background: white;
  border-top: 1px solid $borderColor;
  // padding-top: 10px;
}
.pickerTop{
  @include flex;
  justify-content: space-around;
  border-bottom: 1px solid $borderColor;
  line-height: 2rem;
  padding: 10px 0;
  .cancel{
    color: $lightColor;
  }
  .sure{
    color: $greenColor;
  }
}
</style>
